<template>
  <!-- 选号网  货源配置 -->
  <div class="app-container">
    <div style="margin-bottom:15px">
      <el-button class="font16" icon="el-icon-back" plain type="primary" @click="close">返回 </el-button>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="80px">
      <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
        <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
          <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="retailName">
        <el-input v-model="queryParams.retailName" placeholder="请输入手名称" clearable size="small" />
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        <el-button type="success" icon="el-icon-plus" @click="openSetting('add')">新增</el-button>
      </el-form-item>

    </el-form>
    <div class="table_box table_box_new">
      <el-table border :data="tableData.records" style="width: 100%" stripe>
        <!-- nickName -->
        <el-table-column prop="retailName" label="分销网名称"></el-table-column>
        <el-table-column prop="nickName" label="分销网LOGO" width="120">
          <template slot-scope="scope">
            <imgBox :img="getLogo(scope.row)" width="50px" height="50px"></imgBox>
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="创建人"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="otherShopAddress" label="关联店铺链接"></el-table-column>

        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <!-- <el-button type="edit" @click="editRow(scope.row)">货源配置</el-button> -->
            <!-- <el-button type="add" @click="goodsListOpen(scope.row)">商品列表</el-button> -->
            <el-button type="text" @click="openQRCode(scope.row)">选号网链接</el-button>
            <el-button type="text" @click="openSetting('edit',scope.row)">页面设置</el-button>
            <el-button type="del" @click="delRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>
    <!-- 选号网 -->
    <el-dialog title="我的分销网" :visible.sync="qrCodeShow" width="620px">
      <div style="margin-bottom:15px;margin-left:100px">
        <label for="">
          <b>店铺地址：</b>
          <el-input style="width:250px" @keyup.enter.native="otherShopAddressChange" v-model="otherShopAddress" placeholder="淘宝、PDD等电商平台店铺地址"></el-input>
          <el-button type="primary" @click="otherShopAddressChange">保存</el-button>
        </label>
      </div>

      <div ref="qrcode" style="width:300px; height:300px;margin:0 auto;margin-bottom:15px"></div>
      <div class="link-box">
        <div class="">
          <span class="mylink"> <a :href="phoneLink" target="_blank">{{phoneLink}}</a></span>
          <el-button size="mini" @click="copy(phoneLink)">复制</el-button>
        </div>
      </div>
    </el-dialog>
    <setting ref="setting"></setting>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import {
  fxList,
  delbyRetailKey,
  updateotherShopAddress,
} from "@/api/info/rprice";
import { mapGetters } from "vuex";
import setting from "./components/setting.vue";

export default {
  name: "Fenxiaopeizhi",
  components: { setting },
  data() {
    return {
      qrCodeShow: false,
      phoneLink: "",
      curRetailKey: "",
      qrcode: null,
      otherShopAddress: "",
      dialogVisiblese: false,
      tableData: {
        records: [],
        total: 0,
      },
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  activated() {},
  computed: {
    ...mapGetters(["userInfo", "shopInfo"]),
    tenantList() {
      return this.$store.getters.tenantList;
    },
    retailDomain() {
      return this.$store.getters.retailDomain;
    },
    getLogo() {
      return (row) => {
        let img = "";
        if (row.retailPageSet) {
          try {
            const logo = JSON.parse(row.retailPageSet).logo;
            img = logo;
          } catch (error) {}
        }
        return img;
      };
    },
  },
  methods: {
    // 返回
    close() {
      window.history.go(-1);
    },
    copy(txt) {
      this.$copyText(txt).then((res) => {
        this.$message.success("已复制到剪切板");
      });
    },
    // 获取列表
    getList() {
      this.loading = true;
      fxList(this.queryParams).then((response) => {
        this.tableData.records = response.rows;
        this.tableData.total = response.total;
        this.loading = false;
      });
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    openSetting(flag, row) {
      this.$refs.setting.open(flag, row);
    },
    // 创建分享
    fenxiang(row) {
      this.$refs.addFenxiangDialog.open(row, "mine");
    },

    // 打开新增弹窗
    openAdd() {
      // this.$refs.addDialog.open();
      this.$router.push({
        path: "/fenxiaopeizhi/page/config",
        query: {
          retailKey: "",
        },
      });
    },
    // 打开编辑弹窗
    editRow(row) {
      // this.$refs.addDialog.open("edit", row);
      this.$router.push({
        path: "/fenxiaopeizhi/page/config",
        query: {
          retailKey: row.retailKey,
        },
      });
    },
    // 打开商品列表
    goodsListOpen(row) {
      this.$router.push({
        path: "/fenxiaopeizhi/page/huoyuanliebiao",
        query: {
          retailKey: row.retailKey,
          retailName: row.retailName,
        },
      });
    },

    // 删除
    delRow(row) {
      this.$confirm("此操作将永久删除该分销网配置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delbyRetailKey({
            retailKey: row.retailKey,
          }).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          });
        })
        .catch((err) => {});
    },

    // 保存三方店铺地址
    otherShopAddressChange() {
      updateotherShopAddress({
        retailKey: this.curRow.retailKey,
        otherShopAddress: this.otherShopAddress,
      }).then((r) => {
        if (r.code == 200) {
          this.$message.success("保存成功");
        }
      });
    },
    // 生成二维码 选号网
    openQRCode(row) {
      this.curRow = row;
      this.otherShopAddress = row.otherShopAddress;
      this.qrCodeShow = true;
      let host = "";
      if (this.shopInfo.otherDomain) {
        if (
          this.shopInfo.otherDomain &&
          this.shopInfo.otherDomain.includes(",")
        ) {
          host = "https://" + this.shopInfo.otherDomain.split(",")[0] + "/";
        } else {
          host = "https://" + this.shopInfo.otherDomain + "/";
        }
      } else {
        host = this.retailDomain["h5"].dictValue;
      }
      this.phoneLink = `${host}?flag=${this.shopInfo.tenantId}&retailKey=${row.retailKey}`;

      this.$nextTick(() => {
        if (this.qrcode != null) {
          this.qrcode.clear(); // 清除代码
        } else {
          this.qrcode = new QRCode(this.$refs.qrcode, {
            width: 300,
            height: 300,
            correctLevel: QRCode.CorrectLevel.L,
          });
          //生成二维码
          this.qrcode.makeCode(this.phoneLink);
        }
      });
    },
    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        isLease: 1,
      };
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.link-box {
  > div {
    text-align: center;
    margin-bottom: 10px;
  }
  .mylink {
    margin-right: 10px;
    a {
      color: $primary;
    }
  }
}
</style>